<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 28700
  Date: 2022/6/11
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品录入</title>
    <link rel="stylesheet" type="text/css" href="../../css/table.css"/>
</head>

<body>
<div class="form-item">
    <form action="/welcome" method="post">
        <input type="hidden" name="username" value="${username}">
        <button type="submit" value="返回">
            <span>返回</span>
        </button>
    </form>
</div>

<form action="/proadd" enctype="multipart/form-data" method="post">
    <input type="hidden" name="username" value="${username}">
    <div class="form-item">
        <label>农产品名</label>
        <input type="text"
               name="name"
               class="text-input"
               placeholder="请输入农产品名称(3-20个中文)"
               pattern="^[/u4e00-/u9fa5]{3,20}$"
               oninput="setCustomValidity('')"
               oninvalid="setCustomValidity('请输入合法的昵称>_<')"
               required>
    </div>

    <div class="form-item">
        <label>产品图片</label>
        <input type="file" name="fs"
               class="img-circle">
    </div>
    <div class="form-item">
        <label>安全等级</label>
        <select name="state" class="img-circle">
            <option value="1">普通食品</option>
            <option value="2">无公害食品</option>
            <option value="3">绿色A级食品</option>
            <option value="4">绿色AA级食品</option>
            <option value="5">有机食品</option>
        </select>
    </div>
    <div class="form-item">
        <label>类别</label>
        <select name="tid" class="img-circle">
            <option value="1">粮油</option>
            <option value="2">果蔬及花卉</option>
            <option value="3">林产品</option>
            <option value="4">畜禽产品</option>
            <option value="5">水产品</option>
            <option value="6">其它农副产品</option>
        </select>
    </div>
    <div class="form-item">
        <label>生产公司</label>
        <select class="form-control" name="eid">
            <c:forEach items="${ep}" var="ep">
                <option value="${ep.id}">${ep.name}</option>
            </c:forEach>
        </select>
    </div>
    <div class="form-item">
        <label>负责人</label>
        <input type="text"
               name="pername"
               class="text-input"
               placeholder="请输入负责人姓名名称(3-20个中文)"
               pattern="^[/u4e00-/u9fa5]{3,20}$"
               oninput="setCustomValidity('')"
               oninvalid="setCustomValidity('请输入合法的昵称>_<')"
               required>
    </div>
    <div class="form-item">
        <label>公司电话</label>
        <input type="text"
               name="tel"
               class="text-input"
               placeholder="公司11位电话"
               pattern="^1[0-9]{10}$"
               oninput="onPwdInput(event)"
               required>
    </div>
    <div class="form-item">
        <label>价格</label>
        <input type="text"
               name="price"
               class="text-input"
               placeholder="请输入产品价格">
    </div>
    <div class="form-item">
        <label>产地</label>
        <input type="text"
               name="place"
               class="text-input"
               placeholder="请输入生产地址(最多50个中文)"
               pattern="^[ /u4e00-/u9fa5]{1,50}$"
               required>
    </div>
    </div>
    <div class="form-item">
        <button type="reset" onmousemove="move(event)">
            <span>重 置</span>
        </button>
        <button type="submit" value="录入" onmousemove="move(event)">
            <span>录入</span>
        </button>
    </div>

</form>

<script>
    function move(e) {
        const x = e.pageX - e.target.offsetLeft;
        const y = e.pageY - e.target.offsetTop;
        e.target.style.setProperty("--x", `${x}px`);
        e.target.style.setProperty("--y", `${y}px`);
    }

    function onSubmit(e) {
        e.preventDefault(); // 阻止表单提交
        const form = e.target;
        console.log(params);
    }

    function onPwdInput(e) {
        confirmPwd.pattern = e.target.value;
    }
</script>
</body>

</html>